<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      ref="chatRoom"
      class="chat_dialog"
      :before-close="handleClose"
      :show-close="false"
      :fullscreen="fullscreen"
      :model="false"
      :append-to-body="true"
      style="border-radius: 5px"
    >

      <el-dialog ref="videoDialog"
                 width="650px"
                 :visible.sync="dialogShowed"
                 :close-on-click-modal="false"
                 :before-close="sendVideoClose"
                 :model="false"
                 title="视频通话"
                 :append-to-body="true"
                 :modal-append-to-body="true"
      >
        <div id="dialog-wrap" style="height: 350px">

          <div style="width: 450px;height: 350px;float: left">
            <!--            <div v-if="audio.waiting" style="background: #404040;width: 450px;height: 350px;"></div>-->
            <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
            <video ref="remoteVideo" width="450px" height="350px"
                   autoplay="autoplay"
            ></video>
          </div>
          <div style="width: 130px;height: 100px;position: absolute;right: 30px;bottom: 30px">
            <video ref="localVideo" width="130px" height="100px"
                   autoplay="autoplay" muted="muted"
            ></video>
          </div>

        </div>
      </el-dialog>
      <div slot="title" style="height: 70px;font-size: 12px;background-color:#F2F2F2">
        <el-col :span="12" style="height: 70px">
          <div style="font-size: 20px">
            <span style="font-family: '宋体';position: absolute;left: 25px;top: 25px">{{ toUser.name }}</span>
          </div>
        </el-col>
        <el-col :span="12" style="height: 70px">
          <el-button-group class="title_el-button-group">
            <!--            <el-button class="title_button" icon="el-icon-full-screen" size="mini" @click="fullscreen=!fullscreen"-->
            <!--                       :style="titleUpColor" @mouseenter.native="mouseenterUp"-->
            <!--                       @mouseleave.native="mouseoutUp"></el-button>-->
            <el-button @mouseenter.native="mouseenter" @mouseleave.native="mouseout"
                       class="title_button" icon="el-icon-close" size="mini" @click="handleClose"
                       :style=titleOutColor></el-button>
          </el-button-group>
        </el-col>
      </div>
      <!--      消息内容区-->
      <div slot="default" class="content_list" id="Words">
        <el-button type="text" v-if="showAddTalkingMessage" @click="addTalkingMessage">加载更多</el-button>
        <div v-for="(text,key) in contentList" :key="key" style="margin-top: 8px">
          <div v-if="text.toUserId != toUser.id" class="to_user_text">
            <div style="max-width: 350px; border-radius: 6px; float: left">
              <div style="float: left;width: 50px">
                <el-avatar :size="36" shape="square" :key="toUser.headImage"
                           :src="'http://192.168.123.150'+toUser.headImage"></el-avatar>
              </div>
              <div class="contentStyle" style="float: left;background: #f5f6f7;max-width: 280px">
                <span v-if="text.messageType =='01'" style="word-break: break-word;">{{ text.content }}</span>
                <img v-if="text.messageType=='02'" style="width:100%;" :src="'http://192.168.123.150/'+text.content"
                >
                <span @click="sendVoiceCall" v-if="text.messageType =='03'"><i
                  class="el-icon-video-camera"></i> 视频通话</span>
              </div>
            </div>
          </div>
          <div v-else class="user_text">
            <div style="max-width: 350px;  border-radius: 6px; float: right">
              <div style="float: right;width: 50px">
                <el-avatar :size="36" shape="square" :key="userInfo.headImage"
                           :src="'http://192.168.123.150/'+userInfo.headImage"></el-avatar>
              </div>
              <div class="contentStyle" style="float: left;background: #cad9ff;max-width: 280px">
                <span v-if="text.messageType =='01'" style="word-break: break-word;">{{ text.content }}</span>
                <span @click="sendVoiceCall" v-if="text.messageType =='03'"><i
                  class="el-icon-video-camera"></i> 视频通话</span>
                <img v-if="text.messageType=='02'" style="width:100%;" :src="'http://192.168.123.150/'+text.content"
                     @click="">
              </div>
            </div>
          </div>
        </div>
        <div id="msg_end" style="height:1px; overflow:hidden"></div>
      </div>

      <div slot="footer" style="min-height: 160px;background-color:#F2F2F2">
        <!--        表情包、文件、语音、视频 -->
        <el-col :span="24" style="height: 30px">
          <el-col :span="7">
            <el-button-group style="position: absolute;left: 10px">
              <el-button v-popover:popover class="footer_button" title="表情" icon="el-icon-picture-outline-round"
                         size="medium"></el-button>
              <el-button class="footer_button" icon="el-icon-folder-opened" title="图片" size="medium"
                         @click.native="choseFile"></el-button>
            </el-button-group>
            <input type="file" ref="file" style="display: none" @change="addFile($event)"></input>
          </el-col>
          <el-col :span="7" :offset="9">
            <el-button-group style="position: absolute;right: 10px">
              <el-button class="footer_button" @click="sendVoiceCall()" icon="el-icon-video-camera" title="视频聊天"
                         size="medium"></el-button>
            </el-button-group>
          </el-col>
        </el-col>
        <el-col :span="24" style="margin-top: 1px;background: white;">
          <el-input id="content" @keydown.native="messageSendlisten" type="textarea" style="height: 80px;outline:none;"
                    v-model="content" @blur="handleInputBlur"></el-input>
        </el-col>
        <el-col :span="24" style="background: white">
          <el-col :span="22">
            <el-button size="mini" @click="sendContent()">发送</el-button>
          </el-col>
        </el-col>
      </div>
    </el-dialog>
    <el-popover
      ref="popover"
      placement="top-start"
      width="350"
      trigger="click">
      <div style="padding: 5px;max-height: 300px;overflow-y: auto;">
        <ul style="padding: 5px;text-align: center;">
          <li v-for="(img,key) in imgList" :key="key" style="display: inline-block;padding: 8px"
              @click="addEmoji(img.Emoji)">
            <img :src="'http://192.168.123.150/images/emoji/'+img.imgName" height="30" width="30">
          </li>
        </ul>
      </div>
    </el-popover>


  </div>
</template>

<script>
export default {
  name: "ChatRoom",
  props: {
    toUser: {
      type: Object,
      default: {
        name: '',
        id: '',
        headImage: '',
      }
    },
    randomString: {
      type: String,
    },
  },
  data() {
    return {
      content: "",
      showAddTalkingMessage: true,
      fullscreen: false,
      dialogVisible: false,
      titleOutColor: {
        "background-color": "#F2F2F2",
        "color": "#147A7B"
      },
      audio: {
        currentTime: 0,
        maxTime: 0,
        playing: false,
        muted: false,
        speed: 1,
        waiting: true,
        preload: 'auto'
      },
      pc: {},
      localStream: {},
      remoteStream: {},
      localVideo: {},
      remoteVideo: {},
      isStarted: false,
      isInitiator: false,
      isChannelReady: true,
      titleUpColor: {
        "background-color": "#F2F2F2",
        "color": "#147A7B"
      },
      imgList: [{'Emoji': '😀', 'imgName': 'grinning-face_1f600.png'},
        {'Emoji': '😃', 'imgName': 'smiling-face-with-open-mouth_1f603.png'},
        {'Emoji': '😄', 'imgName': 'smiling-face-with-open-mouth-and-smiling-eyes_1f604.png'},
        {'Emoji': '😁', 'imgName': 'grinning-face-with-smiling-eyes_1f601.png'},
        {'Emoji': '😆', 'imgName': 'smiling-face-with-open-mouth-and-tightly-closed-eyes_1f606.png'},
        {'Emoji': '😅', 'imgName': 'smiling-face-with-open-mouth-and-cold-sweat_1f605.png'},
        {'Emoji': '🤣', 'imgName': 'rolling-on-the-floor-laughing_1f923.png'},
        {'Emoji': '😂', 'imgName': 'face-with-tears-of-joy_1f602.png'},
        {'Emoji': '🙂', 'imgName': 'slightly-smiling-face_1f642.png'},
        {'Emoji': '🙃', 'imgName': 'upside-down-face_1f643.png'},
        {'Emoji': '😉', 'imgName': 'winking-face_1f609.png'},
        {'Emoji': '😊', 'imgName': 'smiling-face-with-smiling-eyes_1f60a.png'},
        {'Emoji': '😇', 'imgName': 'smiling-face-with-halo_1f607.png'},
        {'Emoji': '🥰', 'imgName': 'smiling-face-with-smiling-eyes-and-three-hearts_1f970.png'},
        {'Emoji': '😍', 'imgName': 'smiling-face-with-heart-shaped-eyes_1f60d.png'},
        {'Emoji': '🤩', 'imgName': 'grinning-face-with-star-eyes_1f929.png'},
        {'Emoji': '😘', 'imgName': 'face-throwing-a-kiss_1f618.png'},
        {'Emoji': '😗', 'imgName': 'kissing-face_1f617.png'},
        {'Emoji': '☺️', 'imgName': 'white-smiling-face_263a.png'},
        {'Emoji': '😚', 'imgName': 'kissing-face-with-closed-eyes_1f61a.png'},
        {'Emoji': '😙', 'imgName': 'kissing-face-with-smiling-eyes_1f619.png'},
        {'Emoji': '😋', 'imgName': 'face-savouring-delicious-food_1f60b.png'},
        {'Emoji': '😛', 'imgName': 'face-with-stuck-out-tongue_1f61b.png'},
        {'Emoji': '😜', 'imgName': 'face-with-stuck-out-tongue-and-winking-eye_1f61c.png'},
        {'Emoji': '🤪', 'imgName': 'grinning-face-with-one-large-and-one-small-eye_1f92a.png'},
        {'Emoji': '😝', 'imgName': 'face-with-stuck-out-tongue-and-tightly-closed-eyes_1f61d.png'},
        {'Emoji': '🤑', 'imgName': 'money-mouth-face_1f911.png'},
        {'Emoji': '🤗', 'imgName': 'hugging-face_1f917.png'},
        {'Emoji': '🤭', 'imgName': 'smiling-face-with-smiling-eyes-and-hand-covering-mouth_1f92d.png'},
        {'Emoji': '🤫', 'imgName': 'face-with-finger-covering-closed-lips_1f92b.png'},
        {'Emoji': '🤔', 'imgName': 'thinking-face_1f914.png'},
        {'Emoji': '🤐', 'imgName': 'zipper-mouth-face_1f910.png'},
        {'Emoji': '🤨', 'imgName': 'face-with-one-eyebrow-raised_1f928.png'},
        {'Emoji': '😐', 'imgName': 'neutral-face_1f610.png'},
        {'Emoji': '😑', 'imgName': 'expressionless-face_1f611.png'},
        {'Emoji': '😶', 'imgName': 'face-without-mouth_1f636.png'},
        {'Emoji': '😏', 'imgName': 'smirking-face_1f60f.png'},
        {'Emoji': '😒', 'imgName': 'unamused-face_1f612.png'},
        {'Emoji': '🙄', 'imgName': 'face-with-rolling-eyes_1f644.png'},
        {'Emoji': '😬', 'imgName': 'grimacing-face_1f62c.png'},
        {'Emoji': '🤥', 'imgName': 'lying-face_1f925.png'},
        {'Emoji': '😌', 'imgName': 'relieved-face_1f60c.png'},
        {'Emoji': '😔', 'imgName': 'pensive-face_1f614.png'},
        {'Emoji': '😪', 'imgName': 'sleepy-face_1f62a.png'},
        {'Emoji': '🤤', 'imgName': 'drooling-face_1f924.png'},
        {'Emoji': '😴', 'imgName': 'sleeping-face_1f634.png'},
        {'Emoji': '😷', 'imgName': 'face-with-medical-mask_1f637.png'},
        {'Emoji': '🤒', 'imgName': 'face-with-thermometer_1f912.png'},
        {'Emoji': '🤕', 'imgName': 'face-with-head-bandage_1f915.png'},
        {'Emoji': '🤢', 'imgName': 'nauseated-face_1f922.png'},
        {'Emoji': '🤮', 'imgName': 'face-with-open-mouth-vomiting_1f92e.png'},
        {'Emoji': '🤧', 'imgName': 'sneezing-face_1f927.png'},
        {'Emoji': '🥵', 'imgName': 'overheated-face_1f975.png'},
        {'Emoji': '🥶', 'imgName': 'freezing-face_1f976.png'},
        {'Emoji': '🥴', 'imgName': 'face-with-uneven-eyes-and-wavy-mouth_1f974.png'},
        {'Emoji': '😵', 'imgName': 'dizzy-face_1f635.png'},
        {'Emoji': '🤯', 'imgName': 'shocked-face-with-exploding-head_1f92f.png'},
        {'Emoji': '🤠', 'imgName': 'face-with-cowboy-hat_1f920.png'},
        {'Emoji': '🥳', 'imgName': 'face-with-party-horn-and-party-hat_1f973.png'},
        {'Emoji': '😎', 'imgName': 'smiling-face-with-sunglasses_1f60e.png'},
        {'Emoji': '🤓', 'imgName': 'nerd-face_1f913.png'},
        {'Emoji': '🧐', 'imgName': 'face-with-monocle_1f9d0.png'},
        {'Emoji': '😕', 'imgName': 'confused-face_1f615.png'},
        {'Emoji': '😟', 'imgName': 'worried-face_1f61f.png'},
        {'Emoji': '🙁', 'imgName': 'slightly-frowning-face_1f641.png'},
        {'Emoji': '☹️', 'imgName': 'white-frowning-face_2639.png'},
        {'Emoji': '😮', 'imgName': 'face-with-open-mouth_1f62e.png'},
        {'Emoji': '😯', 'imgName': 'hushed-face_1f62f.png'},
        {'Emoji': '😲', 'imgName': 'astonished-face_1f632.png'},
        {'Emoji': '😳', 'imgName': 'flushed-face_1f633.png'},
        {'Emoji': '🥺', 'imgName': 'face-with-pleading-eyes_1f97a.png'},
        {'Emoji': '😦', 'imgName': 'frowning-face-with-open-mouth_1f626.png'},
        {'Emoji': '😧', 'imgName': 'anguished-face_1f627.png'},
        {'Emoji': '😨', 'imgName': 'fearful-face_1f628.png'},
        {'Emoji': '😰', 'imgName': 'face-with-open-mouth-and-cold-sweat_1f630.png'},
        {'Emoji': '😥', 'imgName': 'disappointed-but-relieved-face_1f625.png'},
        {'Emoji': '😢', 'imgName': 'crying-face_1f622.png'},
        {'Emoji': '😭', 'imgName': 'loudly-crying-face_1f62d.png'},
        {'Emoji': '😱', 'imgName': 'face-screaming-in-fear_1f631.png'},
        {'Emoji': '😖', 'imgName': 'confounded-face_1f616.png'},
        {'Emoji': '😣', 'imgName': 'persevering-face_1f623.png'},
        {'Emoji': '😞', 'imgName': 'disappointed-face_1f61e.png'},
        {'Emoji': '😓', 'imgName': 'face-with-cold-sweat_1f613.png'},
        {'Emoji': '😩', 'imgName': 'weary-face_1f629.png'},
        {'Emoji': '😫', 'imgName': 'tired-face_1f62b.png'},
        {'Emoji': '🥱', 'imgName': 'yawning-face_1f971.png'},
        {'Emoji': '😤', 'imgName': 'face-with-look-of-triumph_1f624.png'},
        {'Emoji': '😡', 'imgName': 'pouting-face_1f621.png'},
        {'Emoji': '😠', 'imgName': 'angry-face_1f620.png'},
        {'Emoji': '🤬', 'imgName': 'serious-face-with-symbols-covering-mouth_1f92c.png'},
        {'Emoji': '😈', 'imgName': 'smiling-face-with-horns_1f608.png'},
        {'Emoji': '👿', 'imgName': 'imp_1f47f.png'},
        {'Emoji': '💀', 'imgName': 'skull_1f480.png'},
        {'Emoji': '☠️', 'imgName': 'skull-and-crossbones_2620.png'},
        {'Emoji': '🤡', 'imgName': 'clown-face_1f921.png'},
        {'Emoji': '👹', 'imgName': 'japanese-ogre_1f479.png'},
        {'Emoji': '👺', 'imgName': 'japanese-goblin_1f47a.png'},
        {'Emoji': '👻', 'imgName': 'ghost_1f47b.png'},
        {'Emoji': '👽', 'imgName': 'extraterrestrial-alien_1f47d.png'},
        {'Emoji': '😺', 'imgName': 'smiling-cat-face-with-open-mouth_1f63a.png'},
        {'Emoji': '😸', 'imgName': 'grinning-cat-face-with-smiling-eyes_1f638.png'},
        {'Emoji': '😹', 'imgName': 'cat-face-with-tears-of-joy_1f639.png'},
        {'Emoji': '😻', 'imgName': 'smiling-cat-face-with-heart-shaped-eyes_1f63b.png'},
        {'Emoji': '😼', 'imgName': 'cat-face-with-wry-smile_1f63c.png'},
        {'Emoji': '😽', 'imgName': 'kissing-cat-face-with-closed-eyes_1f63d.png'},
        {'Emoji': '🙀', 'imgName': 'weary-cat-face_1f640.png'},
        {'Emoji': '😿', 'imgName': 'crying-cat-face_1f63f.png'},
        {'Emoji': '😾', 'imgName': 'pouting-cat-face_1f63e.png'},
        {'Emoji': '🙈', 'imgName': 'see-no-evil-monkey_1f648.png'},
        {'Emoji': '🙉', 'imgName': 'hear-no-evil-monkey_1f649.png'},
        {'Emoji': '🙊', 'imgName': 'speak-no-evil-monkey_1f64a.png'},
        {'Emoji': '💋', 'imgName': 'kiss-mark_1f48b.png'},
        {'Emoji': '💌', 'imgName': 'love-letter_1f48c.png'},
        {'Emoji': '💘', 'imgName': 'heart-with-arrow_1f498.png'},
        {'Emoji': '💝', 'imgName': 'heart-with-ribbon_1f49d.png'},
        {'Emoji': '💖', 'imgName': 'sparkling-heart_1f496.png'},
        {'Emoji': '💗', 'imgName': 'growing-heart_1f497.png'},
        {'Emoji': '💓', 'imgName': 'beating-heart_1f493.png'},
        {'Emoji': '💞', 'imgName': 'revolving-hearts_1f49e.png'},
        {'Emoji': '💕', 'imgName': 'two-hearts_1f495.png'},
        {'Emoji': '💔', 'imgName': 'broken-heart_1f494.png'},
        {'Emoji': '❤️', 'imgName': 'heavy-black-heart_2764.png'},
        {'Emoji': '🧡', 'imgName': 'orange-heart_1f9e1.png'},
        {'Emoji': '💛', 'imgName': 'yellow-heart_1f49b.png'},
        {'Emoji': '💚', 'imgName': 'green-heart_1f49a.png'},
        {'Emoji': '💙', 'imgName': 'blue-heart_1f499.png'},
        {'Emoji': '💜', 'imgName': 'purple-heart_1f49c.png'},
        {'Emoji': '🤎', 'imgName': 'brown-heart_1f90e.png'},
        {'Emoji': '🖤', 'imgName': 'black-heart_1f5a4.png'},
        {'Emoji': '🤍', 'imgName': 'white-heart_1f90d.png'},
        {'Emoji': '💬', 'imgName': 'speech-balloon_1f4ac.png'},
        {'Emoji': '🤳', 'imgName': 'selfie_1f933.png'},
        {'Emoji': '🤳🏻', 'imgName': 'selfie_emoji-modifier-fitzpatrick-type-1-2_1f933-1f3fb_1f3fb.png'},
        {'Emoji': '🤳🏼', 'imgName': 'selfie_emoji-modifier-fitzpatrick-type-3_1f933-1f3fc_1f3fc.png'},
        {'Emoji': '🤳🏽', 'imgName': 'selfie_emoji-modifier-fitzpatrick-type-4_1f933-1f3fd_1f3fd.png'},
        {'Emoji': '🤳🏾', 'imgName': 'selfie_emoji-modifier-fitzpatrick-type-5_1f933-1f3fe_1f3fe.png'},
        {'Emoji': '🤳🏿', 'imgName': 'selfie_emoji-modifier-fitzpatrick-type-6_1f933-1f3ff_1f3ff.png'},
        {'Emoji': '👅', 'imgName': 'tongue_1f445.png'},
        {'Emoji': '👄', 'imgName': 'mouth_1f444.png'},
        {'Emoji': '👶', 'imgName': 'baby_1f476.png'},
        {'Emoji': '👶🏻', 'imgName': 'baby_emoji-modifier-fitzpatrick-type-1-2_1f476-1f3fb_1f3fb.png'},
        {'Emoji': '👶🏼', 'imgName': 'baby_emoji-modifier-fitzpatrick-type-3_1f476-1f3fc_1f3fc.png'},
        {'Emoji': '👶🏽', 'imgName': 'baby_emoji-modifier-fitzpatrick-type-4_1f476-1f3fd_1f3fd.png'},
        {'Emoji': '👶🏾', 'imgName': 'baby_emoji-modifier-fitzpatrick-type-5_1f476-1f3fe_1f3fe.png'},
        {'Emoji': '👶🏿', 'imgName': 'baby_emoji-modifier-fitzpatrick-type-6_1f476-1f3ff_1f3ff.png'},
        {'Emoji': '🧒', 'imgName': 'child_1f9d2.png'},
        {'Emoji': '🧒🏻', 'imgName': 'child_emoji-modifier-fitzpatrick-type-1-2_1f9d2-1f3fb_1f3fb.png'},
        {'Emoji': '🧒🏼', 'imgName': 'child_emoji-modifier-fitzpatrick-type-3_1f9d2-1f3fc_1f3fc.png'},
        {'Emoji': '🧒🏽', 'imgName': 'child_emoji-modifier-fitzpatrick-type-4_1f9d2-1f3fd_1f3fd.png'},
        {'Emoji': '🧒🏾', 'imgName': 'child_emoji-modifier-fitzpatrick-type-5_1f9d2-1f3fe_1f3fe.png'},
        {'Emoji': '🧒🏿', 'imgName': 'child_emoji-modifier-fitzpatrick-type-6_1f9d2-1f3ff_1f3ff.png'},
        {'Emoji': '👦', 'imgName': 'boy_1f466.png'},
        {'Emoji': '👦🏻', 'imgName': 'boy_emoji-modifier-fitzpatrick-type-1-2_1f466-1f3fb_1f3fb.png'},
        {'Emoji': '👦🏼', 'imgName': 'boy_emoji-modifier-fitzpatrick-type-3_1f466-1f3fc_1f3fc.png'},
        {'Emoji': '👦🏽', 'imgName': 'boy_emoji-modifier-fitzpatrick-type-4_1f466-1f3fd_1f3fd.png'},
        {'Emoji': '👦🏾', 'imgName': 'boy_emoji-modifier-fitzpatrick-type-5_1f466-1f3fe_1f3fe.png'},
        {'Emoji': '👦🏿', 'imgName': 'boy_emoji-modifier-fitzpatrick-type-6_1f466-1f3ff_1f3ff.png'},
        {'Emoji': '👧', 'imgName': 'girl_1f467.png'},
        {'Emoji': '👧🏻', 'imgName': 'girl_emoji-modifier-fitzpatrick-type-1-2_1f467-1f3fb_1f3fb.png'},
        {'Emoji': '👧🏼', 'imgName': 'girl_emoji-modifier-fitzpatrick-type-3_1f467-1f3fc_1f3fc.png'},
        {'Emoji': '👧🏽', 'imgName': 'girl_emoji-modifier-fitzpatrick-type-4_1f467-1f3fd_1f3fd.png'},
        {'Emoji': '👧🏾', 'imgName': 'girl_emoji-modifier-fitzpatrick-type-5_1f467-1f3fe_1f3fe.png'},
        {'Emoji': '👧🏿', 'imgName': 'girl_emoji-modifier-fitzpatrick-type-6_1f467-1f3ff_1f3ff.png'},
        {'Emoji': '🧑', 'imgName': 'adult_1f9d1.png'},
        {'Emoji': '🧑🏻', 'imgName': 'adult_emoji-modifier-fitzpatrick-type-1-2_1f9d1-1f3fb_1f3fb.png'},
        {'Emoji': '🧑🏼', 'imgName': 'adult_emoji-modifier-fitzpatrick-type-3_1f9d1-1f3fc_1f3fc.png'},
        {'Emoji': '🧑🏽', 'imgName': 'adult_emoji-modifier-fitzpatrick-type-4_1f9d1-1f3fd_1f3fd.png'},
        {'Emoji': '🧑🏾', 'imgName': 'adult_emoji-modifier-fitzpatrick-type-5_1f9d1-1f3fe_1f3fe.png'},
        {'Emoji': '🧑🏿', 'imgName': 'adult_emoji-modifier-fitzpatrick-type-6_1f9d1-1f3ff_1f3ff.png'},
        {'Emoji': '👱', 'imgName': 'person-with-blond-hair_1f471.png'},
        {
          'Emoji': '👱🏻',
          'imgName': 'person-with-blond-hair_emoji-modifier-fitzpatrick-type-1-2_1f471-1f3fb_1f3fb.png'
        },
        {'Emoji': '👱🏼', 'imgName': 'person-with-blond-hair_emoji-modifier-fitzpatrick-type-3_1f471-1f3fc_1f3fc.png'},
        {'Emoji': '👱🏽', 'imgName': 'person-with-blond-hair_emoji-modifier-fitzpatrick-type-4_1f471-1f3fd_1f3fd.png'},
        {'Emoji': '👱🏾', 'imgName': 'person-with-blond-hair_emoji-modifier-fitzpatrick-type-5_1f471-1f3fe_1f3fe.png'},
        {'Emoji': '👱🏿', 'imgName': 'person-with-blond-hair_emoji-modifier-fitzpatrick-type-6_1f471-1f3ff_1f3ff.png'},
        {'Emoji': '👨', 'imgName': 'man_1f468.png'},
        {'Emoji': '👨🏻', 'imgName': 'man_emoji-modifier-fitzpatrick-type-1-2_1f468-1f3fb_1f3fb.png'},
        {'Emoji': '👨🏼', 'imgName': 'man_emoji-modifier-fitzpatrick-type-3_1f468-1f3fc_1f3fc.png'},
        {'Emoji': '👨🏽', 'imgName': 'man_emoji-modifier-fitzpatrick-type-4_1f468-1f3fd_1f3fd.png'},
        {'Emoji': '👨🏾', 'imgName': 'man_emoji-modifier-fitzpatrick-type-5_1f468-1f3fe_1f3fe.png'},
        {'Emoji': '👨🏿', 'imgName': 'man_emoji-modifier-fitzpatrick-type-6_1f468-1f3ff_1f3ff.png'},
        {'Emoji': '🧔', 'imgName': 'bearded-person_1f9d4.png'},
        {'Emoji': '🧔🏻', 'imgName': 'bearded-person_emoji-modifier-fitzpatrick-type-1-2_1f9d4-1f3fb_1f3fb.png'},
        {'Emoji': '🧔🏼', 'imgName': 'bearded-person_emoji-modifier-fitzpatrick-type-3_1f9d4-1f3fc_1f3fc.png'},
        {'Emoji': '🧔🏽', 'imgName': 'bearded-person_emoji-modifier-fitzpatrick-type-4_1f9d4-1f3fd_1f3fd.png'},
        {'Emoji': '🧔🏾', 'imgName': 'bearded-person_emoji-modifier-fitzpatrick-type-5_1f9d4-1f3fe_1f3fe.png'},
        {'Emoji': '🧔🏿', 'imgName': 'bearded-person_emoji-modifier-fitzpatrick-type-6_1f9d4-1f3ff_1f3ff.png'},
        {'Emoji': '👨\u200d🦰', 'imgName': 'man-red-haired_1f468-200d-1f9b0.png'},
        {'Emoji': '👨🏻\u200d🦰', 'imgName': 'man-red-haired-light-skin-tone_1f468-1f3fb-200d-1f9b0.png'},
        {'Emoji': '👨🏼\u200d🦰', 'imgName': 'man-red-haired-medium-light-skin-tone_1f468-1f3fc-200d-1f9b0.png'},
        {'Emoji': '👨🏽\u200d🦰', 'imgName': 'man-red-haired-medium-skin-tone_1f468-1f3fd-200d-1f9b0.png'},
        {'Emoji': '👨🏾\u200d🦰', 'imgName': 'man-red-haired-medium-dark-skin-tone_1f468-1f3fe-200d-1f9b0.png'},
        {'Emoji': '👨🏿\u200d🦰', 'imgName': 'man-red-haired-dark-skin-tone_1f468-1f3ff-200d-1f9b0.png'},
        {'Emoji': '👨\u200d🦱', 'imgName': 'man-curly-haired_1f468-200d-1f9b1.png'},
        {'Emoji': '👨🏻\u200d🦱', 'imgName': 'man-curly-haired-light-skin-tone_1f468-1f3fb-200d-1f9b1.png'},
        {'Emoji': '👨🏼\u200d🦱', 'imgName': 'man-curly-haired-medium-light-skin-tone_1f468-1f3fc-200d-1f9b1.png'},
        {'Emoji': '👨🏽\u200d🦱', 'imgName': 'man-curly-haired-medium-skin-tone_1f468-1f3fd-200d-1f9b1.png'},
        {'Emoji': '👨🏾\u200d🦱', 'imgName': 'man-curly-haired-medium-dark-skin-tone_1f468-1f3fe-200d-1f9b1.png'},
        {'Emoji': '👨🏿\u200d🦱', 'imgName': 'man-curly-haired-dark-skin-tone_1f468-1f3ff-200d-1f9b1.png'},
        {'Emoji': '👨\u200d🦳', 'imgName': 'man-white-haired_1f468-200d-1f9b3.png'},
        {'Emoji': '👨🏻\u200d🦳', 'imgName': 'man-white-haired-light-skin-tone_1f468-1f3fb-200d-1f9b3.png'},
        {'Emoji': '👨🏼\u200d🦳', 'imgName': 'man-white-haired-medium-light-skin-tone_1f468-1f3fc-200d-1f9b3.png'},
        {'Emoji': '👨🏽\u200d🦳', 'imgName': 'man-white-haired-medium-skin-tone_1f468-1f3fd-200d-1f9b3.png'},
        {'Emoji': '👨🏾\u200d🦳', 'imgName': 'man-white-haired-medium-dark-skin-tone_1f468-1f3fe-200d-1f9b3.png'},
        {'Emoji': '👨🏿\u200d🦳', 'imgName': 'man-white-haired-dark-skin-tone_1f468-1f3ff-200d-1f9b3.png'},
        {'Emoji': '👨\u200d🦲', 'imgName': 'man-bald_1f468-200d-1f9b2.png'},
        {'Emoji': '👨🏻\u200d🦲', 'imgName': 'man-bald-light-skin-tone_1f468-1f3fb-200d-1f9b2.png'},
        {'Emoji': '👨🏼\u200d🦲', 'imgName': 'man-bald-medium-light-skin-tone_1f468-1f3fc-200d-1f9b2.png'},
        {'Emoji': '👨🏽\u200d🦲', 'imgName': 'man-bald-medium-skin-tone_1f468-1f3fd-200d-1f9b2.png'},
        {'Emoji': '👨🏾\u200d🦲', 'imgName': 'man-bald-medium-dark-skin-tone_1f468-1f3fe-200d-1f9b2.png'},
        {'Emoji': '👨🏿\u200d🦲', 'imgName': 'man-bald-dark-skin-tone_1f468-1f3ff-200d-1f9b2.png'},
        {'Emoji': '👩', 'imgName': 'woman_1f469.png'},
        {'Emoji': '👩🏻', 'imgName': 'woman_emoji-modifier-fitzpatrick-type-1-2_1f469-1f3fb_1f3fb.png'},
        {'Emoji': '👩🏼', 'imgName': 'woman_emoji-modifier-fitzpatrick-type-3_1f469-1f3fc_1f3fc.png'},
        {'Emoji': '👩🏽', 'imgName': 'woman_emoji-modifier-fitzpatrick-type-4_1f469-1f3fd_1f3fd.png'},
        {'Emoji': '👩🏾', 'imgName': 'woman_emoji-modifier-fitzpatrick-type-5_1f469-1f3fe_1f3fe.png'},
        {'Emoji': '👩🏿', 'imgName': 'woman_emoji-modifier-fitzpatrick-type-6_1f469-1f3ff_1f3ff.png'},
        {'Emoji': '👩\u200d🦰', 'imgName': 'woman-red-haired_1f469-200d-1f9b0.png'},
        {'Emoji': '👩🏻\u200d🦰', 'imgName': 'woman-red-haired-light-skin-tone_1f469-1f3fb-200d-1f9b0.png'},
        {'Emoji': '👩🏼\u200d🦰', 'imgName': 'woman-red-haired-medium-light-skin-tone_1f469-1f3fc-200d-1f9b0.png'},
        {'Emoji': '👩🏽\u200d🦰', 'imgName': 'woman-red-haired-medium-skin-tone_1f469-1f3fd-200d-1f9b0.png'},
        {'Emoji': '👩🏾\u200d🦰', 'imgName': 'woman-red-haired-medium-dark-skin-tone_1f469-1f3fe-200d-1f9b0.png'},
        {'Emoji': '👩🏿\u200d🦰', 'imgName': 'woman-red-haired-dark-skin-tone_1f469-1f3ff-200d-1f9b0.png'},
        {'Emoji': '🧑\u200d🦰', 'imgName': 'person-red-hair_1f9d1-200d-1f9b0.png'},
        {'Emoji': '🧑🏻\u200d🦰', 'imgName': 'person-light-skin-tone-red-hair_1f9d1-1f3fb-200d-1f9b0.png'},
        {'Emoji': '🧑🏼\u200d🦰', 'imgName': 'person-medium-light-skin-tone-red-hair_1f9d1-1f3fc-200d-1f9b0.png'},
        {'Emoji': '🧑🏽\u200d🦰', 'imgName': 'person-medium-skin-tone-red-hair_1f9d1-1f3fd-200d-1f9b0.png'},
        {'Emoji': '🧑🏾\u200d🦰', 'imgName': 'person-medium-dark-skin-tone-red-hair_1f9d1-1f3fe-200d-1f9b0.png'},
        {'Emoji': '🧑🏿\u200d🦰', 'imgName': 'person-dark-skin-tone-red-hair_1f9d1-1f3ff-200d-1f9b0.png'},
        {'Emoji': '👩\u200d🦱', 'imgName': 'woman-curly-haired_1f469-200d-1f9b1.png'},
        {'Emoji': '👩🏻\u200d🦱', 'imgName': 'woman-curly-haired-light-skin-tone_1f469-1f3fb-200d-1f9b1.png'},
        {'Emoji': '👩🏼\u200d🦱', 'imgName': 'woman-curly-haired-medium-light-skin-tone_1f469-1f3fc-200d-1f9b1.png'},
        {'Emoji': '👩🏽\u200d🦱', 'imgName': 'woman-curly-haired-medium-skin-tone_1f469-1f3fd-200d-1f9b1.png'},
        {'Emoji': '👩🏾\u200d🦱', 'imgName': 'woman-curly-haired-medium-dark-skin-tone_1f469-1f3fe-200d-1f9b1.png'},
        {'Emoji': '👩🏿\u200d🦱', 'imgName': 'woman-curly-haired-dark-skin-tone_1f469-1f3ff-200d-1f9b1.png'},
        {'Emoji': '🧑\u200d🦱', 'imgName': 'person-curly-hair_1f9d1-200d-1f9b1.png'},
        {'Emoji': '🧑🏻\u200d🦱', 'imgName': 'person-light-skin-tone-curly-hair_1f9d1-1f3fb-200d-1f9b1.png'},
        {'Emoji': '🧑🏼\u200d🦱', 'imgName': 'person-medium-light-skin-tone-curly-hair_1f9d1-1f3fc-200d-1f9b1.png'},
        {'Emoji': '🧑🏽\u200d🦱', 'imgName': 'person-medium-skin-tone-curly-hair_1f9d1-1f3fd-200d-1f9b1.png'},
        {'Emoji': '🧑🏾\u200d🦱', 'imgName': 'person-medium-dark-skin-tone-curly-hair_1f9d1-1f3fe-200d-1f9b1.png'},
        {'Emoji': '🧑🏿\u200d🦱', 'imgName': 'person-dark-skin-tone-curly-hair_1f9d1-1f3ff-200d-1f9b1.png'},
        {'Emoji': '👩\u200d🦳', 'imgName': 'woman-white-haired_1f469-200d-1f9b3.png'},
        {'Emoji': '👩🏻\u200d🦳', 'imgName': 'woman-white-haired-light-skin-tone_1f469-1f3fb-200d-1f9b3.png'},
        {'Emoji': '👩🏼\u200d🦳', 'imgName': 'woman-white-haired-medium-light-skin-tone_1f469-1f3fc-200d-1f9b3.png'},
        {'Emoji': '👩🏽\u200d🦳', 'imgName': 'woman-white-haired-medium-skin-tone_1f469-1f3fd-200d-1f9b3.png'},
        {'Emoji': '👩🏾\u200d🦳', 'imgName': 'woman-white-haired-medium-dark-skin-tone_1f469-1f3fe-200d-1f9b3.png'},
        {'Emoji': '👩🏿\u200d🦳', 'imgName': 'woman-white-haired-dark-skin-tone_1f469-1f3ff-200d-1f9b3.png'},
        {'Emoji': '🧑\u200d🦳', 'imgName': 'person-white-hair_1f9d1-200d-1f9b3.png'},
        {'Emoji': '🧑🏻\u200d🦳', 'imgName': 'person-light-skin-tone-white-hair_1f9d1-1f3fb-200d-1f9b3.png'},
        {'Emoji': '🧑🏼\u200d🦳', 'imgName': 'person-medium-light-skin-tone-white-hair_1f9d1-1f3fc-200d-1f9b3.png'},
        {'Emoji': '🧑🏽\u200d🦳', 'imgName': 'person-medium-skin-tone-white-hair_1f9d1-1f3fd-200d-1f9b3.png'},
        {'Emoji': '🧑🏾\u200d🦳', 'imgName': 'person-medium-dark-skin-tone-white-hair_1f9d1-1f3fe-200d-1f9b3.png'},
        {'Emoji': '🧑🏿\u200d🦳', 'imgName': 'person-dark-skin-tone-white-hair_1f9d1-1f3ff-200d-1f9b3.png'},
        {'Emoji': '👩\u200d🦲', 'imgName': 'woman-bald_1f469-200d-1f9b2.png'},
        {'Emoji': '👩🏻\u200d🦲', 'imgName': 'woman-bald-light-skin-tone_1f469-1f3fb-200d-1f9b2.png'},
        {'Emoji': '👩🏼\u200d🦲', 'imgName': 'woman-bald-medium-light-skin-tone_1f469-1f3fc-200d-1f9b2.png'},
        {'Emoji': '👩🏽\u200d🦲', 'imgName': 'woman-bald-medium-skin-tone_1f469-1f3fd-200d-1f9b2.png'},
        {'Emoji': '👩🏾\u200d🦲', 'imgName': 'woman-bald-medium-dark-skin-tone_1f469-1f3fe-200d-1f9b2.png'},
        {'Emoji': '👩🏿\u200d🦲', 'imgName': 'woman-bald-dark-skin-tone_1f469-1f3ff-200d-1f9b2.png'},
        {'Emoji': '🧑\u200d🦲', 'imgName': 'person-bald_1f9d1-200d-1f9b2.png'},
        {'Emoji': '🧑🏻\u200d🦲', 'imgName': 'person-light-skin-tone-bald_1f9d1-1f3fb-200d-1f9b2.png'},
        {'Emoji': '🧑🏼\u200d🦲', 'imgName': 'person-medium-light-skin-tone-bald_1f9d1-1f3fc-200d-1f9b2.png'},
        {'Emoji': '🧑🏽\u200d🦲', 'imgName': 'person-medium-skin-tone-bald_1f9d1-1f3fd-200d-1f9b2.png'},
        {'Emoji': '🧑🏾\u200d🦲', 'imgName': 'person-medium-dark-skin-tone-bald_1f9d1-1f3fe-200d-1f9b2.png'},
        {'Emoji': '🧑🏿\u200d🦲', 'imgName': 'person-dark-skin-tone-bald_1f9d1-1f3ff-200d-1f9b2.png'},
        {'Emoji': '👱\u200d♀️', 'imgName': 'blonde-woman_1f471-200d-2640-fe0f.png'},
        {'Emoji': '👱🏻\u200d♀️', 'imgName': 'blonde-woman-type-1-2_1f471-1f3fb-200d-2640-fe0f.png'},
        {'Emoji': '👱🏼\u200d♀️', 'imgName': 'blonde-woman-type-3_1f471-1f3fc-200d-2640-fe0f.png'},
        {'Emoji': '👱🏽\u200d♀️', 'imgName': 'blonde-woman-type-4_1f471-1f3fd-200d-2640-fe0f.png'},
        {'Emoji': '👱🏾\u200d♀️', 'imgName': 'blonde-woman-type-5_1f471-1f3fe-200d-2640-fe0f.png'},
        {'Emoji': '👱🏿\u200d♀️', 'imgName': 'blonde-woman-type-6_1f471-1f3ff-200d-2640-fe0f.png'},
        {'Emoji': '👱\u200d♂️', 'imgName': 'blond-man_1f471-200d-2642-fe0f.png'},
        {'Emoji': '👱🏻\u200d♂️', 'imgName': 'blond-man-type-1-2_1f471-1f3fb-200d-2642-fe0f.png'},
        {'Emoji': '👱🏼\u200d♂️', 'imgName': 'blond-man-type-3_1f471-1f3fc-200d-2642-fe0f.png'},
        {'Emoji': '👱🏽\u200d♂️', 'imgName': 'blond-man-type-4_1f471-1f3fd-200d-2642-fe0f.png'},
        {'Emoji': '👱🏾\u200d♂️', 'imgName': 'blond-man-type-5_1f471-1f3fe-200d-2642-fe0f.png'},
        {'Emoji': '👱🏿\u200d♂️', 'imgName': 'blond-man-type-6_1f471-1f3ff-200d-2642-fe0f.png'},
        {'Emoji': '🧓', 'imgName': 'older-adult_1f9d3.png'},
        {'Emoji': '🧓🏻', 'imgName': 'older-adult_emoji-modifier-fitzpatrick-type-1-2_1f9d3-1f3fb_1f3fb.png'},
        {'Emoji': '🧓🏼', 'imgName': 'older-adult_emoji-modifier-fitzpatrick-type-3_1f9d3-1f3fc_1f3fc.png'},
        {'Emoji': '🧓🏽', 'imgName': 'older-adult_emoji-modifier-fitzpatrick-type-4_1f9d3-1f3fd_1f3fd.png'},
        {'Emoji': '🧓🏾', 'imgName': 'older-adult_emoji-modifier-fitzpatrick-type-5_1f9d3-1f3fe_1f3fe.png'},
        {'Emoji': '🧓🏿', 'imgName': 'older-adult_emoji-modifier-fitzpatrick-type-6_1f9d3-1f3ff_1f3ff.png'},
        {'Emoji': '👴', 'imgName': 'older-man_1f474.png'},
        {'Emoji': '👴🏻', 'imgName': 'older-man_emoji-modifier-fitzpatrick-type-1-2_1f474-1f3fb_1f3fb.png'},
        {'Emoji': '👴🏼', 'imgName': 'older-man_emoji-modifier-fitzpatrick-type-3_1f474-1f3fc_1f3fc.png'},
        {'Emoji': '👴🏽', 'imgName': 'older-man_emoji-modifier-fitzpatrick-type-4_1f474-1f3fd_1f3fd.png'},
        {'Emoji': '👴🏾', 'imgName': 'older-man_emoji-modifier-fitzpatrick-type-5_1f474-1f3fe_1f3fe.png'},
        {'Emoji': '👴🏿', 'imgName': 'older-man_emoji-modifier-fitzpatrick-type-6_1f474-1f3ff_1f3ff.png'},
        {'Emoji': '👵', 'imgName': 'older-woman_1f475.png'},
        {'Emoji': '👵🏻', 'imgName': 'older-woman_emoji-modifier-fitzpatrick-type-1-2_1f475-1f3fb_1f3fb.png'},
        {'Emoji': '👵🏼', 'imgName': 'older-woman_emoji-modifier-fitzpatrick-type-3_1f475-1f3fc_1f3fc.png'},
        {'Emoji': '👵🏽', 'imgName': 'older-woman_emoji-modifier-fitzpatrick-type-4_1f475-1f3fd_1f3fd.png'},
        {'Emoji': '👵🏾', 'imgName': 'older-woman_emoji-modifier-fitzpatrick-type-5_1f475-1f3fe_1f3fe.png'},],
      imageList: [],
      userInfo: {
        userId: '',
        name: '',
        headImage: '',
      },
      blurIndex: '',
      contentList: [],
      isAddList: false,
      pcInit: false,
      dialogShowed: false,
      isSuccess: false,
      isLoading: false,
      isPlaying: false,
      errorMessage: '',
    }
  },
  mounted() {
    this.userInfo = this.$store.state.users;
  },
  methods: {
    sendVideoClose() {
      //发送给对方结束通话
      let data = {
        toUserId: this.toUser.id,
        content: '',
        userId: this.userInfo.userId,
        messageType: '07',
      }
      if (this.global.ws && this.global.ws.readyState == 1) {
        this.global.ws.send(JSON.stringify(data))
      }
      this.videoClose()

    },
    videoClose() {
      this.destroyVideo()
      this.isStarted = false
      this.isInitiator = false
      this.global.setPc({})
      this.global.setPcInit(false)
      this.dialogShowed = false
    },
    destroyVideo() {
      this.global.pc.removeStream(this.localStream);
      this.global.pc.close();
      this.localStream.getTracks().forEach((track) => {
        track.stop()
      })
      this.localStream = {}
      this.remoteStream = {}
    },
    sendVoiceCall() {
      this.isInitiator = true
      this.dialogShowed = true
      this.getVideo()
    },
    gotLocalMediaStream(mediastream) {
      console.log('Adding local stream.');
      console.log(mediastream)
      this.localStream = mediastream;
      let localVideo = this.$refs["localVideo"]
      localVideo.srcObject = mediastream;
      // sendMessage('got user media');

      if (this.isInitiator) {
        this.maybeStart();
      }
    },
    createPeerConnection() {
      try {
        this.pc = new RTCPeerConnection();
        this.global.setPc(this.pc)
        this.global.pc.onicecandidate = this.handleIceCandidate;
        this.global.pc.onaddstream = this.handleRemoteStreamAdded;
        this.global.pc.onremovestream = this.handleRemoteStreamRemoved;
        this.global.setPcInit(true)
        console.log('Created RTCPeerConnnection');
      } catch (e) {
        console.log('Failed to create PeerConnection, exception: ' + e.message);
        alert('Cannot create RTCPeerConnection object.');
        return;
      }
    },
    handleIceCandidate(event) {
      console.log('icecandidate event: ', event);
      if (event.candidate) {
        let data = {
          toUserId: this.toUser.id,
          content: JSON.stringify({
            label: event.candidate.sdpMLineIndex,
            id: event.candidate.sdpMid,
            candidate: event.candidate.candidate
          }),
          userId: this.userInfo.userId,
          messageType: '05'
        }
        this.global.ws.send(JSON.stringify(data))
      } else {
        console.log('End of candidates.');
      }
    },
    handleRemoteStreamAdded(event) {
      console.log('Remote stream added.');
      this.remoteStream = event.stream;
      console.log(event)
      this.$nextTick(() => {
        let remoteVideo = this.$refs["remoteVideo"]
        console.log(remoteVideo)
        remoteVideo.srcObject = event.stream;
        remoteVideo.play()
      })

    },
    handleRemoteStreamRemoved(event) {
      console.log('Remote stream removed. Event: ', event);
    },
    doCall() {
      this.isStarted = true
      console.log('Sending offer to peer');
      this.global.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
    },
    setLocalAndSendMessage(sessionDescription) {
      this.global.pc.setLocalDescription(sessionDescription);
      console.log('setLocalAndSendMessage sending message', sessionDescription);
      let data = {
        toUserId: this.toUser.id,
        content: JSON.stringify(sessionDescription),
        userId: this.userInfo.userId,
        messageType: '03'
      }
      if (this.global.ws && this.global.ws.readyState == 1) {
        this.global.ws.send(JSON.stringify(data))
      }
      this.contentList.push(data)
    },
    handleCreateOfferError(event) {
      console.log('createOffer() error: ', event);
    },
    maybeStart() {
      console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
      if (!this.isStarted && typeof this.localStream !== 'undefined') {
        if (!this.global.pcInit) {
          console.log('>>>>>> creating peer connection');
          this.createPeerConnection();
        }
        this.global.pc.addStream(this.localStream)
        console.log('isInitiator', this.isInitiator);
        if (this.isInitiator) {
          this.doCall();
        }
      }
    },
    doAnswer() {
      console.log('Sending answer to peer.');
      this.global.pc.createAnswer().then(
        this.setLocalAndSendMessageAnswer,
        this.onCreateSessionDescriptionError
      );

    },
    setLocalAndSendMessageAnswer(sessionDescription) {
      this.global.pc.setLocalDescription(sessionDescription);
      console.log('setLocalAndSendMessageAnswer sending message', sessionDescription);
      let data = {
        toUserId: this.toUser.id,
        content: JSON.stringify(sessionDescription),
        userId: this.userInfo.userId,
        messageType: '04'
      }
      if (this.global.ws && this.global.ws.readyState === 1) {
        this.global.ws.send(JSON.stringify(data))
      }
    },
    onCreateSessionDescriptionError(err) {
      console.log("创建SessionDescriptionError error！")
    },
    getVideo() {
      let that = this
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
      }).then(that.gotLocalMediaStream)
        .catch(error => {
          console.log(error)
        })
    },
    getVideo1() {
      let that = this
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
      }).then(that.gotLocalMediaStream1)
        .catch(error => {
          console.log(error)
        })
    },
    gotLocalMediaStream1(mediastream) {
      console.log('Adding local stream.');
      this.localStream = mediastream;
      let localVideo = this.$refs["localVideo"]
      localVideo.srcObject = mediastream;
      // sendMessage('got user media');
      if (!this.isStarted && typeof this.localStream !== 'undefined') {
        console.log('>>>>>> creating peer connection');
        if (!this.global.pcInit) {
          this.createPeerConnection();
        }
        this.global.pc.addStream(this.localStream)
        console.log('isInitiator', this.isInitiator);
        this.doAnswer()
      }
    },
    getTalkingData() {
      let userId = this.userInfo.userId;
      let toUserId = this.toUser.id
      this.$axios({
        url: '/getTalkingMessage',
        method: "get",
        params: {
          userId: userId,
          toUserId: toUserId
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.contentList = res.data.data
        }
      })
    },
    addTalkingMessage() {
      this.isAddList = true
      let userId = this.userInfo.userId;
      let toUserId = this.toUser.id
      this.$axios({
        url: '/addTalkingMessage',
        method: "get",
        params: {
          userId: userId,
          toUserId: toUserId,
        }
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.data.length === 0) {
            this.showAddTalkingMessage = false
          } else {
            console.log(res.data.data)
            this.contentList.unshift(...res.data.data)
          }

        }
      })
    },
    //发送文件
    addFile(event) {
      let file = event.target.files[0]
      let fileSize = file.size
      if (fileSize > 1024 * 10 * 1024) {
        this.$message.error("文件大小超过上传大小(10MB)！")
        return;
      }
      let fileName = file.name
      let type = fileName.split('.')[1]
      console.log(type)
      if (type === 'png' || type === 'jpg' || type === 'PNG' || type === 'JPG' || type === 'JPEG') {

      } else {
        this.$message.error("只能发送png、jpg格式图片！")
      }
      let formData = new FormData()
      formData.set("file", file)
      this.$axios({
        headers: {
          "Content-Type": "multipart/form-data"
        },
        method: "POST",
        url: "/saveTalkingFile",
        data: formData,
      }).then(res => {
        if (res.data.code === 200) {
          let data = {
            toUserId: this.toUser.id,
            content: res.data.data,
            userId: this.userInfo.userId,
            messageType: '02',
          }
          if (this.global.ws && this.global.ws.readyState == 1) {
            this.global.ws.send(JSON.stringify(data))
          }
          this.contentList.push(data)
        }
      })
    },
    //选择图片
    choseFile() {
      this.$refs.file.click()
    },
    handleInputBlur(e) {
      this.blurIndex = e.srcElement.selectionStart;
    },
    addEmoji(img) {
      let index = this.blurIndex
      let str = this.content
      this.content = str.slice(0, index) + img + str.slice(index);
      this.blurIndex += img.length
    },
    mouseenter() {
      this.titleOutColor = {
        "background-color": "#e81123",
        "color": "white"
      }
    },
    mouseout() {
      this.titleOutColor = {
        "background-color": "#F2F2F2",
        "color": "#147A7B"
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.showAddTalkingMessage = true
      this.contentList = []
      this.$emit("clearToUser")
    },
    messageSendlisten(event) {
      if (event.keyCode === 13) {
        this.sendContent()
        event.preventDefault(); // 阻止浏览器默认换行操作
        return false;
      }
    },
    sendContent() {
      let that = this;
      let content = this.content;
      if (content.length == 0) {
        return;
      }
      let toUserId = this.toUser.id.toString();
      let userId = this.$store.getters.userId;
      let messageType = "01";
      let data = {
        toUserId,
        content,
        userId,
        messageType,
      }
      this.contentList.push(data)
      this.content = ""
      if (that.global.ws && that.global.ws.readyState == 1) {
        that.global.ws.send(JSON.stringify(data))
      }
      // this.$parent.$parent.send(JSON.stringify(data))
    },

  },
  watch: {
    randomString(val, oldVal) {
      this.dialogVisible = true
      this.contentList = []
      this.getTalkingData()
    },
    contentList(val) {
      this.$nextTick(() => {
        if (this.isAddList) {
          this.isAddList = false
        } else {
          let ele = document.getElementById("msg_end")
          ele.scrollIntoView();
        }

      })
    },
    'toUser.id'(val) {
      if (val !== '' && val !== this.userInfo.userId) {
        this.contentList = []
        this.getTalkingData()
      }
    },
    //聊天消息接受回显
    '$store.state.common.content'(val, oldVal) {
      console.log(val)
      this.$nextTick(() => {
        //没有在聊天框 接收到消息 提醒
        if (!this.toUser.id) {
          if (val.messageType === '01' || val.messageType === '02') {
            this.$notify({
              title: '通知',
              message: '您有一条新消息，请在消息中查看！',
              type: 'success'
            });
          }
          return;
        }
        console.log(this.toUser && this.toUser.id == val.userId)
        console.log(val)
        console.log(this.toUser)
        console.log(this.toUser.id == val.userId)
        if (this.toUser && this.toUser.id == val.userId) {
          if (val.messageType != '04' && val.messageType != '05') {
            this.contentList.push(val)
          }
        }

        //接收到发来的通话请求
        if (val.messageType === "03") {
          console.log(this.toUser)
          let toUserId = val.userId
          this.$axios({
            method: 'get',
            params: {
              id: toUserId,
            },
            url: '/getMyUser'
          }).then(res => {
            if (res.data.code === 200) {
              let data = res.data.data

              this.$confirm(data.nickname + '邀请您视频通话！  是否同意视频通话？')
                .then(_ => {
                  let offer = JSON.parse(val.content)
                  this.toUser = {
                    id: data.id,
                    name: data.nickname,
                    headImage: data.headImage
                  }
                  this.dialogVisible = true
                  this.$nextTick(() => {
                    let chatRoom = this.$refs['chatRoom']
                    this.getTalkingData()
                    this.dialogShowed = true
                  })
                  this.getVideo1()
                  //接受offer
                  this.global.pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(val.content)))
                  //回复answer

                })
                .catch(_ => {
                  let data1 = {
                    toUserId: data.id,
                    content: '',
                    userId: this.userInfo.userId,
                    messageType: '07',
                  }
                  if (this.global.ws && this.global.ws.readyState == 1) {
                    this.global.ws.send(JSON.stringify(data1))
                  }
                });
            }
          })
        }

        //收到answer
        if (val.messageType === '04') {
          if (this.toUser.headImage == '../../../../static/image/noLoginHeadImage.png') {
            return;
          }
          let data = JSON.parse(val.content)
          if (!this.global.pcInit) {
            return;
          }
          console.warn(data)
          this.global.pc.setRemoteDescription(new RTCSessionDescription(data))
          console.log("setRemoteDescription 完成")
        }

        //收到icecandidate
        if (val.messageType === '05') {
          // if (this.toUser.headImage == '../../../../static/image/noLoginHeadImage.png'){
          //   return;
          // }
          if (!this.global.pcInit) {
            this.createPeerConnection()
          }

          let message = JSON.parse(val.content)
          var candidate = new RTCIceCandidate({
            sdpMLineIndex: message.label,
            candidate: message.candidate
          });
          this.global.pc.addIceCandidate(candidate);

        }
        //挂断
        if (val.messageType === '07') {
          this.$message.error("对方 (挂断/拒绝) 视频通话！")
          this.videoClose()
        }
        if (val.messageType === "404") {
          this.$message.error("对方不在线！")
          this.videoClose()
        }

      })
    }
  },

}
</script>

<style>

.chat_dialog .el-dialog__header {
  padding: 0px;
}

.chat_dialog .el-dialog__footer {
  padding: 0px;
}

.chat_dialog .title_el-button-group {
  height: 25px;
  position: absolute;
  right: 0px;
}

/*关闭框和放大框不要边框*/
.chat_dialog .title_el-button-group .title_button {
  height: 25px;
  border: none;
}

.chat_dialog .footer_button {
  height: 25px;
  border: none;
  background-color: #F2F2F2;
}

div::-webkit-scrollbar {
  width: 1px;
  height: 5px;
  /**/
}

.chat_dialog li:hover {
  background-color: #F2F2F2;
  cursor: pointer;
}

.chat_dialog .el-textarea__inner {
  height: 80px;
  resize: none;
  border: none
}

.chat_dialog .el-textarea__inner:focus {
  border: none
}


.chat_dialog .to_user_text {
  width: 630px;
  text-align: left;
}

.chat_dialog .user_text {
  width: 630px;
  text-align: left;
}

.chat_dialog .content_list {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  align-items: center;
  flex-direction: column;

}

.chat_dialog .contentStyle {
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
  padding: 5px;
}

.chat_dialog .el-dialog__body {
  height: 300px;
  padding: 10px 10px 10px 10px;
  overflow: scroll;
}

</style>
